import React, { useState } from "react";
import { Button, message } from "antd";
import { LikeOutlined, LikeFilled } from "@ant-design/icons";
import { good, mockData } from "./constant";
import "./index.css";

interface GoodCollectionErrorProps {
    id: number;
    initialLiked?: boolean;
    initialLikedCount?: number;
}

const GoodCollectionError: React.FC<GoodCollectionErrorProps> = ({
    id,
    initialLiked = false,
    initialLikedCount = 0,
}) => {
    const [liked, setLiked] = useState(initialLiked);
    const [likedCount, setLikedCount] = useState(initialLikedCount);

    const handleLike = async () => {
        try {
            // 这里注释掉实际的请求代码
            // const response = await fetch(`/api/like/${id}`, {
            //   method: 'POST',
            //   headers: {
            //     'Content-Type': 'application/json',
            //   },
            //   body: JSON.stringify({ liked: !liked }),
            // });
            // const data = await response.json();

            // 模拟请求成功
            setLiked(!liked);
            setLikedCount(liked ? likedCount - 1 : likedCount + 1);
            message.success(liked ? "取消点赞成功" : "点赞成功");
        } catch (error) {
            message.error("操作失败，请稍后重试");
        }
    };

    return (
        <div className="good-collection-error">
            <Button
                type="text"
                icon={liked ? <LikeFilled /> : <LikeOutlined />}
                onClick={handleLike}
                className={liked ? "liked" : ""}
            >
                {good[liked ? 1 : 0]} ({likedCount})
            </Button>
        </div>
    );
};

export default GoodCollectionError;
